﻿import React from 'react';
import $ from 'jquery';
import ReactDOM from 'react-dom';
import NavBar from './js/components/nav-bar';
import FilmList from './film-list.jsx';
import FilmDetail from './film-detail.jsx';
import FilmOrder from './film-order.jsx';
import FilmOrderPay from './film-order-pay.jsx';
import CallDoctor from './call-doctor.jsx';
import DoctorsList from './doctors-list.jsx';
import DoctorsDetail from './doctor-detail.jsx';
import Forums from './forums.jsx';
import Mine from './mine.jsx';
import { Router, Route, Link , Redirect, RouterContext,IndexRoute } from 'react-router';
require( './css/main-style.css');
import

import FilmStore from './js/filmStore';
import {Actions} from './js/filmStore/actions';

function mainNav(){
	return FilmStore.ctrlNav()
}
class MainApp extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			mainNav:mainNav()
		};
		this.dosomething = this.dosomething.bind(this);
		this._onChange = this._onChange.bind(this);
		this._mainNav = this._mainNav.bind(this)
	}
	dosomething(){
		console.log("do something")
	}
	componentDidMount(){
		FilmStore.addChangeListener(this._onChange);
	}

	componentWillUnmount(){
		FilmStore.removeChangeListener(this._onChange);
	}
	_onChange(){
		this.setState({
			mainNav:mainNav()
		})
	}
	_mainNav(){
		console.log("hello")
	}
	componentWillReceiveProps(){
	}

	render(){
		if(this.state.mainNav.show){
			$('body').css('padding-bottom','66px')
		}else{
			$('body').css('padding-bottom',0)
		}
		return (
			<div className="wrap" onClick={this.aaa}>
                {this.props.children}
                <NavBar stat={this.state.mainNav} />
			</div>
		)
	}
}


let wrap = document.createElement('div');
document.body.appendChild(wrap);

function hello(){

}
ReactDOM.render((
    <Router>
        <Route path="/" component={MainApp} test={true}>
            <IndexRoute component={FilmList} />
			<Route path="/films/:id" component={FilmDetail} />
				<Route path="/films/order/:id" component={FilmOrder} />
					<Route path="/films/order/pay/:id" component={FilmOrderPay} />
			{/*<Route path="/films/:id" component={FilmDetail}>
				<Route path="/order" component={FilmOrder}>
					<Route path="/pay" component={FilmOrderPay} />
				</Route>
				<Redirect from="order" to="/order/:id" />
			</Route>*/}

            <Route path="/call-doctor" component={CallDoctor} />
            <Route path="/doctors-list/:id" component={DoctorsList} />
            <Route path="/doctor-detail/:id" component={DoctorsDetail} />
            <Route path="/forums" component={Forums} />
            <Route path="/mine" component={Mine}/>
        </Route>
    </Router>
),wrap);
